<style scoped>

</style>
<template>
  <button class="button" style="float: right; position: relative">
    <form method="post" :name="ids" enctype="multipart/form-data">
    <input type="file" @change="toUpload" name="file" style="position: absolute;left: 0;top: 0;opacity: 0;width: 100%;height: 100%;" multiple="multiple">
    </form>
    上传文件</button>
</template>

<script>
  import Vue from 'vue'
  import Message from 'vue-bulma-message'

  const MessageComponent = Vue.extend(Message)

  const openMessage = (propsData = {
    title: '',
    message: '',
    type: '',
    direction: '',
    duration: 1500,
    container: '.messages'
  }) => {
    return new MessageComponent({
      el: document.createElement('div'),
      propsData
    })
  }
export default {
  data() {
    return {
    }
  },
  components: {
  },

  props: ['ids', 'path'],
  computed:{

  },
  mounted () {

  },
  methods: {
    toUpload () {
      let vm = this
      let data = new FormData(document.forms.namedItem(vm.ids))
      let name = $('[name='+vm.ids+']').find('input').val().split('\\').pop()
      vm.$http.post('file/api/files?path='+encodeURIComponent(vm.path+'/'+name),data).then(function(res){
        openMessage({
          title: '提示',
          message: '上传成功',
          type: 'primary'
        })
        vm.$emit('callback')
      })
    },
  }
}
</script>
